<div class="tabbable tabs-left">
    <?php echo $this->partial('analytics/analytics/left_menu.phtml'); ?>
    <div class="tab-content">
        <style>
            .table td {
                border-top: 0;
            }
        </style>
        <table class="table table-striped table-bordered">
            <thead>
            <th><?php echo $this->translate('订单统计'); ?></th>
            </thead>
            <tbody>
            <tr>
                <td width="25%"><b><?php echo $this->translate('今日订单'); ?>：</b><?php echo $this->day_order_num; ?></td>
                <td width="25%"><b><?php echo $this->translate('本月订单'); ?>：</b><?php echo $this->month_order_num; ?></td>
                <td width="25%"><b><?php echo $this->translate('已付款订单'); ?>：</b><?php echo $this->pay_order_num; ?></td>
                <td width="25%"><b><?php echo $this->translate('订单总数'); ?>：</b><?php echo $this->order_num; ?></td>
            </tr>
            <tr style="font-weight: bold;">
                <form method="get" name="order_stats_form" id="order_stats_form" action="">
                    <input type="hidden" name="dateNum" value="<?php if($this->date_num > 0) echo $this->date_num+1; ?>">
                    <td colspan="4" style="text-align: right;line-height: 40px;">
                        <a href="<?php echo $this->url('analytics/default', array('controller'=>'Analytics', 'action'=>'orderStats'), array('query'=>array('dateNum'=>7))) . ((isset($this->group_id) and $this->group_id > 0) ? '&group_id='.$this->group_id : ''); ?>" class="btn <?php if($this->date_num == 6) echo 'btn-primary'; ?>"><?php echo $this->translate('最近7天'); ?></a>&nbsp;
                        <a href="<?php echo $this->url('analytics/default', array('controller'=>'Analytics', 'action'=>'orderStats'), array('query'=>array('dateNum'=>30))) . ((isset($this->group_id) and $this->group_id > 0) ? '&group_id='.$this->group_id : ''); ?>" class="btn <?php if($this->date_num == 29) echo 'btn-primary'; ?>"><?php echo $this->translate('最近30天'); ?></a>&nbsp;&nbsp;
                        <select name="group_id" onchange="submit_form()" class="span2" style="width: 150px;">
                            <option value=""><?php echo $this->translate('选择客户组'); ?></option>
                            <?php if(!empty($this->group_array)) { foreach($this->group_array as $group_value) { ?>
                                <option value="<?php echo $group_value['group_id']; ?>" <?php if(isset($this->group_id) and $this->group_id == $group_value['group_id']) echo 'selected'; ?>><?php echo $this->escapeHtml($group_value['group_name']); ?></option>
                            <?php } } ?>
                        </select>
                        <input type="text" class="span2 Wdate" name="start_time" id="start_time" value="<?php if(isset($this->start_time)) echo $this->start_time; ?>" onclick="WdatePicker({el:'start_time', dateFmt:'yyyy-MM-dd'})">
                        ~
                        <input type="text" class="span2 Wdate" name="end_time" id="end_time" value="<?php if(isset($this->end_time)) echo $this->end_time; ?>"  onclick="WdatePicker({el:'end_time', dateFmt:'yyyy-MM-dd'})">
                        <button type="submit" class="btn btn-primary"><?php echo $this->translate('查看'); ?></button>
                    </td>
                </form>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="user_chart" style="width: 100%;height: 400px;margin-top: 20px;"></div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="payment_type_chart" style="width: 100%;height: 400px;margin-top: 50px;"></div>
                </td>
                <td colspan="2">
                    <div id="express_type_chart" style="width: 100%;height: 400px;margin-top: 50px;"></div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="order_map_chart" style="width: 100%;height: 600px;margin-top: 50px;"></div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="<?php echo $this->basePath('/public/js/DatePicker/WdatePicker.js'); ?>"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('user_chart'), dbshop_echarts_stype);
    option = {
        title: {
            text: '<?php echo $this->translate('订单统计图表'); ?>'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['<?php echo $this->translate('订单数'); ?>','<?php echo $this->translate('付款订单数'); ?>']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [<?php echo $this->date_str; ?>]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'<?php echo $this->translate('订单数'); ?>',
                type:'line',
                data:[<?php echo $this->week_order; ?>]
            },
            {
                name:'<?php echo $this->translate('付款订单数'); ?>',
                type:'line',
                data:[<?php echo $this->week_pay_order; ?>]
            }
        ]
    };
    myChart.setOption(option);

    var paymentChart = echarts.init(document.getElementById('payment_type_chart'), dbshop_echarts_stype);
    option = {
        title : {
            text: '<?php echo $this->translate('支付方式统计'); ?>',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [<?php echo $this->payment_str; ?>]
        },
        series : [
            {
                name: '<?php echo $this->translate('支付方式'); ?>',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    <?php
                    $payment_count = count($this->payment_array);
                    $p_i = 1;
                    foreach($this->payment_array as $p_value) {
                        if(is_array($p_value)) echo "{value:".$p_value['num'].", name:".$p_value['name']."}";
                        else echo "{value:0, name:".$p_value."}";
                        if($p_i < $payment_count) echo ',';

                        $p_i++;
                    } ?>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    paymentChart.setOption(option);

    var expressChart = echarts.init(document.getElementById('express_type_chart'), 'shine');
    option = {
        title : {
            text: '<?php echo $this->translate('配送方式统计'); ?>',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [<?php echo $this->express_str; ?>]
        },
        series : [
            {
                name: '<?php echo $this->translate('配送方式'); ?>',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    <?php
                    $express_count = count($this->express_array);
                    $p_i = 1;
                    foreach($this->express_array as $e_value) {
                        if(is_array($e_value)) echo "{value:".$e_value['num'].", name:".$e_value['name']."}";
                        else echo "{value:0, name:".$e_value."}";
                        if($p_i < $express_count) echo ',';

                        $p_i++;
                    } ?>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    expressChart.setOption(option);

    $.get('<?php echo $this->basePath('public/js/echarts/map/china.json'); ?>', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('order_map_chart'), dbshop_echarts_stype);
        option = {
            title : {
                text: '<?php echo $this->translate('不同地区订单统计'); ?>',
                x:'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '<?php echo $this->translate('订单量'); ?>',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:[
                        <?php
                        if(isset($this->region_array) and !empty($this->region_array)) {
                            $mCount     = count($this->region_array)-1;
                            $maxValue   = 0;
                            foreach($this->region_array as $mKey => $mValue) {
                                if($mValue['d_count'] > $maxValue) $maxValue = $mValue['d_count'];
                                echo "{name: '".str_replace(array('省', '市', '省', '市'), '', $mValue['region_name'])."',value: ".$mValue['d_count']." }".($mCount == $mKey ? '' : ',');
                            }
                        }
                        ?>
                    ]
                }
            ],
            visualMap: {
                min: 0,
                max: <?php echo isset($maxValue) ? $maxValue : '0'; ?>,
                left: 'left',
                top: 'bottom',
                text: ['<?php echo $this->translate('高'); ?>','<?php echo $this->translate('低'); ?>'],           // 文本，默认为数值文本
                calculable: true
            },
        };
        chart.setOption(option);
    });

    function submit_form() {
        $('#order_stats_form').submit();
    }
</script>